<template>
  <div class="qrcode-management-container">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-form :inline="true" class="search-form">
        <el-form-item label="批次ID">
          <el-input v-model="searchForm.batchId" placeholder="请输入批次ID"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态">
            <el-option label="全部" :value="null"></el-option>
            <el-option label="有效" :value="1"></el-option>
            <el-option label="无效" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="有效期至">
          <el-date-picker
            v-model="searchForm.validUntil"
            type="datetime"
            placeholder="选择截止时间"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据表格 -->
    <div class="table-container">
      <el-table
        :data="tableData"
        border
        v-loading="loading"
        style="width: 100%">
        <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
        <el-table-column prop="batchId" label="批次ID" width="100" align="center"></el-table-column>
        <el-table-column prop="code" label="二维码内容" min-width="200" show-overflow-tooltip></el-table-column>
        <el-table-column label="状态" width="100" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status ? 'success' : 'danger'">
              {{ scope.row.status ? '有效' : '无效' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="validUntil" label="有效期至" width="180" align="center"></el-table-column>
        <el-table-column prop="scanCount" label="扫描次数" width="100" align="center"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180" align="center"></el-table-column>
        <el-table-column label="操作" width="150" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              :type="scope.row.status ? 'danger' : 'success'"
              @click="toggleStatus(scope.row)">
              {{ scope.row.status ? '禁用' : '启用' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import http from '@/http/http'

export default {
  name: 'QrcodeManagement',
  data() {
    return {
      searchForm: {
        batchId: null,
        status: null,
        validUntil: null
      },
      tableData: [],
      loading: false,
      page: 1,
      pageSize: 10,
      total: 0
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      this.loading = true
      try {
        const params = {
          page: this.page,
          size: this.pageSize,
          ...this.searchForm
        }
        const res = await http.qrcode.getList(params)
        if (res.data.code === 200) {
          const { records, total, size, current } = res.data.data
          this.tableData = records
          this.total = total
          this.pageSize = size
          this.page = current
        }
      } catch (error) {
        console.error('获取数据失败:', error)
        this.$message.error('获取数据失败')
      } finally {
        this.loading = false
      }
    },

    handleSearch() {
      this.page = 1
      this.fetchData()
    },

    resetSearch() {
      this.searchForm = {
        batchId: null,
        status: null,
        validUntil: null
      }
      this.page = 1
      this.fetchData()
    },

    async toggleStatus(row) {
      const confirmMsg = row.status ? '确定要禁用该二维码吗？' : '确定要启用该二维码吗？'
      try {
        await this.$confirm(confirmMsg, '提示', {
          type: 'warning',
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
        const action = row.status ? http.qrcode.disable : http.qrcode.enable
        const res = await action(row.id)
        if (res.data.code === 200) {
          this.$message.success(res.data.data)
          this.fetchData()
        }
      } catch (error) {
        if (error !== 'cancel') {
          console.error('操作失败:', error)
          this.$message.error('操作失败')
        }
      }
    },

    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },

    handleCurrentChange(val) {
      this.page = val
      this.fetchData()
    }
  }
}
</script>

<style scoped>
.table-container {
  max-height: 400px; /* 设置表格最大高度 */
  overflow-y: auto; /* 添加垂直滚动条 */
}

.qrcode-management-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 100px);
}

.search-bar {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.pagination-container {
  background-color: #fff;
  padding: 15px;
  margin-top: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.el-table {
  margin-top: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}
</style> 